<template>
	<div class="register">
		<div class="register_con">
			<div class="logo">
<!--				<img src="../assets/logo/logo.png" alt="掌上进销存">-->
        <h1>缠论K线工具</h1>
			</div>
			<el-form ref="formValidateRef" :model="formValidate" :rules="ruleValidate">
				<el-form-item prop="mobile">
					<el-input v-model.trim="formValidate.mobile" placeholder="手机号"></el-input>
				</el-form-item>
				<el-form-item prop="realName">
					<el-input v-model.trim="formValidate.realName" placeholder="姓名"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" v-model.trim="formValidate.password" placeholder="密码"></el-input>
				</el-form-item>
				<el-form-item prop="passwdCheck">
					<el-input type="password" v-model.trim="formValidate.passwdCheck" placeholder="确认密码"></el-input>
				</el-form-item>
				<el-form-item prop="captcha">
					<div class="captcha">
						<el-input v-model.trim="formValidate.captcha" placeholder="验证码"></el-input>
						<img :src="CaptchaUrl"  @click.stop="getCaptchaUrl" alt="验证码">
					</div>
				</el-form-item>
				<el-form-item>
					<el-button style="width: 100%;" type="primary" @click="handleSubmit" :loading="loading">免费领取60天VIP，立即注册</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" link @click="goLogin">返回登录</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>

</template>
<script setup>
import {computed, reactive, ref} from 'vue'
import {GET, POST} from "../api";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import apiUrl from "../config/apiUrls";
import {notify} from "../utils/commonScript";
import {patternUtil} from "../utils/patternUtil";
import {getUUID, setCookies} from "../utils";
import {Present} from "@element-plus/icons-vue";

const loading = ref(false);
const store = useStore();
const router = useRouter();
const formValidateRef = ref();
const formValidate = reactive({
	mobile: '',
	password: '',
	passwdCheck: '',
	realName: '',
	captcha: '',
	uuid: '',
});
const CaptchaUrl = computed(() => {
	return `${apiUrl.baseUrl}/captcha?uuid=${formValidate.uuid}&t=${new Date().getTime()}`
})
const getCaptchaUrl = () => {
	formValidate.uuid = getUUID()
}
getCaptchaUrl()
const validatePass = (rule, value, callback) => {
	if (value === '') {
		callback(new Error('密码不能为空'));
	} else {
		if (formValidate.passwdCheck !== '') {
			// 对第二个密码框单独验证
			formValidateRef.value.validateField('passwdCheck');
		}
		callback();
	}
};
const validatePassCheck = (rule, value, callback) => {
	if (value === '') {
		callback(new Error('确认密码不能为空'));
	} else if (value !== formValidate.password) {
		callback(new Error('两次密码不一致!'));
	} else {
		callback();
	}
};
const ruleValidate = reactive({
	realName: [
		{required: true, message: '姓名不能为空', trigger: 'blur'},
		{required: true, pattern: patternUtil.chineseCharacter, message: "请输入汉字，长度在1~25之间", trigger: 'blur'},
	],
	mobile: [
		{required: true, message: '手机号不能为空', trigger: 'blur'},
		{pattern: patternUtil.mobile, message: "请输入正确的手机号"}
	],
	password: [
		{required: true, pattern: patternUtil.password, message: "以字母开头，长度在6~18之间，只能包含字母、数字和下划线", trigger: 'blur'},
		{required: true, validator: validatePass, trigger: 'blur'},
	],
	passwdCheck: [
		{required: true, validator: validatePassCheck, trigger: 'blur'}
	],
	captcha: [
		{required: true, message: '请输入验证码', target: 'blur'}
	]
})
const goLogin= () => {
	router.push('login')
}
const handleSubmit = () => {
	formValidateRef.value?.validate((valid) => {
		if (valid) {
			loading.value = true
			POST(apiUrl.register, {
				mobile: formValidate.mobile,
				password: formValidate.password,
				realName: formValidate.realName,
				captcha: formValidate.captcha,
				uuid: formValidate.uuid,
			}).then(res => {
        notify('注册成功', 'success')
				sessionStorage.setItem('baseInfo', JSON.stringify(res.data.baseInfo))
				setCookies("token", res.data.token);
				router.push({
					path: '/'
				})
			}).finally(() => {
				getCaptchaUrl()
				loading.value = false
			})
		}
	})
}
</script>
<style lang="scss" scoped>
.register {
	background: url("../assets/img/bg.png") 0 0 no-repeat;
	background-size: 100% 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	position: relative;

  h1{
    text-align: center;
    margin-bottom: 20px;
    font-size: 30px;
    color: #df1212;
  }

	.logo {
		text-align: center;
		margin-bottom: 20px;
		img {
			width: 250px;
			height: 60px;
		}
	}

	.register_con {
		width: 400px;
		align-self: center;
		background: #FFFFFF;
		padding: 15px;
		border-radius: 6px;
		h1{
			text-align: center;
			margin-bottom: 15px;
		}
		.captcha{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.el-input {
				margin-right: 20px;
			}
			img{
				cursor: pointer;
				width: 150px;
				height: 40px;
			}
		}
	}
}

</style>
